<template>
  <div class="body">
    <div class="container">
      <!-- 导航栏 -->
      <el-row style="margin-bottom:30px">
        <el-menu
        :default-active="$route.path"
        router
        class="el-menu-demo"
        mode="horizontal"
        >
          <el-col :span="10" :offset="2">
            <el-menu-item index="/test/login">
              <span slot="title">登录</span>
            </el-menu-item>
          </el-col>
          <el-col :span="10">
            <el-menu-item index="/test/register" >
              <span slot="title">注册</span>
            </el-menu-item>
          </el-col>
        </el-menu>
      </el-row>

      <!-- 对应form表单 -->
      <div class="content">
        <Login v-show="operation == 'login'"></Login>
        <Register v-show="operation == 'register'"></Register>
      </div>
    </div>

    <!-- 背景动画 -->
    <div class="square">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="circle">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
  </div>
</template>

<script>
import Login from "@/pages/registerAndLogin/login";
import Register from "@/pages/registerAndLogin/register";
export default {
  computed:{
    operation() {
      return this.$route.params.operation;
    },
  },
  components: { Login, Register },
};
</script>

<style lang="less" scoped>
.body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 渐变背景 */
  background: linear-gradient(200deg,#e3c5eb,#a9c1ed);
  /* 溢出隐藏 */
  // overflow: hidden;
  .container {
    position: relative;
    z-index: 1;
    background-color: #fff;
    border-radius: 15px;
    width: 400px;
    height: 600px;
    /* 阴影 */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);

    .el-menu{
      border-radius:15px 15px 0 0;
    }
    .el-menu-item{
      text-align: center;
      font-size: 20px;
    }
    .el-menu-item.is-active{
      /*因为菜单项的背景色是直接写在元素上的行内样式，需要添加!important提高样式的优先级，否则会被覆盖*/
      color: #409EFF !important;
      border-bottom: 1px solid #409EFF;
    }
    .el-menu-item:focus,.el-menu-item:hover{
      background-color: none;
    }
    .content{
      height: 450px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .circle, .square{
    // z-index: 0;
    ul li{
      /* 绝对定位 */
      position: absolute;
      border: 1px solid #fff;
      background-color: #fff;
      width: 30px;
      height: 30px;
      list-style: none;
      opacity: 0;
    }
  }

  .square li{
      top: 40vh;
      left: 60vw;
      /* 执行动画：动画名 时长 线性的 无限次播放 */
      animation: square 10s linear infinite;
  }
  .square li:nth-child(2){
      top: 80vh;
      left: 10vw;
      /* 设置动画延迟时间 */
      animation-delay: 2s;
  }
  .square li:nth-child(3){
      top: 80vh;
      left: 85vw;
      animation-delay: 4s;
  }
  .square li:nth-child(4){
      top: 10vh;
      left: 70vw;
      animation-delay: 6s;
  }
  .square li:nth-child(5){
      top: 10vh;
      left: 10vw;
      animation-delay: 8s;
  }
  .circle li{
      bottom: 0;
      left: 15vw;
      /* 执行动画：动画名 时长 线性的 无限次播放 */
      animation: circle 10s linear infinite;
  }
  .circle li:nth-child(2){
      left: 35vw;
      /* 设置动画延迟时间 */
      animation-delay: 2s;
  }
  .circle li:nth-child(3){
      left: 55vw;
      animation-delay: 6s;
  }
  .circle li:nth-child(4){
      left: 75vw;
      animation-delay: 4s;
  }
  .circle li:nth-child(5){
      left: 90vw;
      animation-delay: 8s;
  }

  /* 定义动画 */
  @keyframes square {
      0%{
          transform: scale(0) rotateY(0deg);
          opacity: 1;
      }
      100%{
          transform: scale(5) rotateY(1000deg);
          opacity: 0;
      }
  }
  @keyframes circle {
      0%{
          transform: scale(0) rotate(0deg);
          opacity: 1;
          bottom: 0;
          border-radius: 0;
      }
      100%{
          transform: scale(5) rotate(1000deg);
          opacity: 0;
          bottom: 90vh;
          border-radius: 50%;
      }
  }
}
</style>